<template>
	<view class="topContains">
		<u-sticky  customNavHeight='0'>
			<u-navbar
				@leftClick="leftClick"
				@rightClick="rightClick"
			  :title="titleNam"
			   height='48'
			   :placeholder="true"
			  rightText="一键已读"
			  leftIconColor="#000"
			/>
		</u-sticky>
		<view class="text-center font-12 colorb2 py-3 mx-4 bg-f5">
			-仅显示近3个月系统通知-
		</view>
		<!-- 列表内容 -->
		<view class="">
			<view class="bg-white px-3 py-4 d-flex my-2" v-for="(item,index) in msgList" :key="index" @click="tomessageList(item)">
				<view class="bg-size text-center" :class="item.type=='活动'?'bg-FE587E':'bg-FEB'">
					<text class="iconfont font-12 colorfff">{{item.type}}</text>
				</view>
				<view class="width100">
					<view class="d-flex align-start justify-space-between ">
						<text class="font-14 color000">{{item.title}}</text>
						<text class="font-12 color666">{{item.time}}></text>
					</view>
					<view class="font-12 color999 pt-1">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<u-loadmore 
			loadmoreText="已经到底了"
			line
		/>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
			titleNam:'',
			msgList:[
			  {
				  type:'活动',
				  title:'系统通知',
				  time:'10分钟前',
				  name:'本周报名“家电特惠商品”安装师傅招募活动，即有机会参与“合作师傅专属活动”，优先推单，优先指派!',
			  },  {
				  type:'平台',
				  title:'订单消息',
				  time:'1小时前',
				  name:'固化速度快，使用方便，最低到手价6.2元，去抢购>>',
			  },
			]
	    };
	  },
	  onLoad(options) {
	  	if(options.title){
	  		this.titleNam=options.title
	  	}
	  },
	  methods: {
		leftClick(){
				  uni.navigateBack()
		},
		rightClick(){
			uni.showModal({
					title: '提示',
					content: '这是一个模态弹窗',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
			})
		}
	  }
	};
</script>

<style lang="scss" scoped>
	.topContains{
		.bg-white{
			gap: 20rpx;
		}
		.bg-size{
			width: 80rpx;
			height: 80rpx;
			line-height:80rpx;
			border-radius: 8rpx;
		}
		.bg-FE587E{
			background: #FE587E;
		}
		.bg-FEB{
			background: #feb556;
		}
		.width100{
			flex: 1;
		}
	}
</style>